<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <style type="text/css">
        .aui-tab {
            position: fixed !important;
            width: 100%;
            z-index: 999;
            top: 0;
        }

        .share_bg {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.0);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100000
        }

        .share_mode {
            width: 100%;
            height: auto;
            overflow: hidden;
            background: #ededed;
            position: fixed;
            left: 0px;
            bottom: 0px;
            border-radius: 10px 10px 0 0
        }

        .colse_btn {
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            position: relative;
            color: #323232;
            font-size: 14px;
        }

        .colse_btn:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            background: #e6e6e6;
            right: 0;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .share_title {
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-align: center;
            color: #323232;
            position: relative;
            font-size: 14px;
        }

        .share_title:before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: #e6e6e6;
            right: 0;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .share_content {
            width: 100%;
            height: auto;
            overflow: hidden;
        }

        .share_content p {
            color: #ff2526;
            font-size: 12px;
            width: 90%;
            margin: 10px auto;
            line-height: 20px;
        }

        .share_modes {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 15px;
        }

        .share_info {
            width: 33.33%;
            float: left;
            text-align: center;
            margin-bottom: 15px;
            height: 80px;
            overflow: hidden;
        }

        .share_info img {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            text-align: center;
        }

        .share_info text {
            display: block;
            color: #808080;
            font-size: 13px;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="share_bg" style="display:none">
        <div class="share_mode">
            <div class="share_title">
                分享方式
            </div>
            <div class="share_content">
                <p>
                    *注:由于新版微信调整了分享策略，如果遇到多图无法分享至朋友圈，请先保存图片再打开微信分享。
                </p>
                <div class="share_modes">

                    <div class="share_info saveimg">
                        <img src="../image/save_01.png">
                        <text>
            保存图片
          </text>
                    </div>
                    <div class="share_info copywenan">
                        <img src="../image/save_02.png">
                        <text>
          复制文案
          </text>
                    </div>
                    <div class="share_info wxshare">
                        <img src="../image/save_03.png">
                        <text>
            微信
          </text>
                    </div>
                    <div class="share_info friendsshare">
                        <img src="../image/save_04.png">
                        <text>
          朋友圈
          </text>
                    </div>
                    <div class="share_info kongjianshare">
                        <img src="../image/save_05.png">
                        <text>
          QQ空间
          </text>
                    </div>
                    <div class="share_info qqshare">
                        <img src="../image/save_06.png">
                        <text class="copybtn">
            QQ
          </text>
                    </div>
                </div>
            </div>
            <div class="colse_btn">
                取消分享
            </div>
        </div>
    </div>
    <canvas id="sharecanvas" style="background-color:white; width:80%;display: none;" class="am-text-center am-center"></canvas>
    <section class="aui-content">
      <!--加载loading-->
      <div class="index_loading" style="margin-top:0rem !important">
          <img src="../image/index_loading.gif" />
          <span>加载中,请稍后...</span>
      </div>
        <div class="aui-tab aui-margin-0" id="menu">
            <div class="aui-tab-item aui-text-white aui-label aui-bg-tag-quan" tapmode onclick="fnSetNavMenuSelected(0);">早安问候</div>
            <div class="aui-tab-item " tapmode onclick="fnSetNavMenuSelected(1);">晚安问候</div>
            <div class="aui-tab-item " tapmode onclick="fnSetNavMenuSelected(2);">节日问候</div>
        </div>

        <div class="aui-flex-row aui-margin-5" id="div_goods_list" style="margin-top:3rem !important"></div>
        <!--加载loading-->
        <div class="index_loading" style="margin-top:8rem !important">
            <img src="../image/index_loading.gif" />
            <span>加载中,请稍后...</span>
        </div>
        <div class="temporarily_data" style="display:none;">
            <img src="../image/no_date.png" />
        </div>
        <!--返回顶部-->
        <div class="gotoback" onclick="gotoback()" id="gotoback" style="z-index:9999999">
            <img src="../image/gotoback.png">
        </div>
    </section>
    <script id="tmpl_goods_list" type="text/x-dot-template">
        {{~it:vo:index}}
        <div class="aui-flex-item-12 aui-flex-col aui-flex-top">
            <div class="aui-flex-item-1"><img src="{{=$api.getStorage('appSetInfo').app_logo}}" class="aui-img-round" /></div>
            <div class="aui-flex-item-11 aui-flex-row">
                <div class="aui-flex-12 aui-ellipsis-1 ">{{=$api.getStorage('appSetInfo').app_name}}</div>
                <div class="aui-flex-item-12 aui-font-size-14">{{=vo.content}}</div>
                <div class="aui-flex-12 aui-flex-col aui-flex-bottom ">
                    <div class="aui-flex-item-8 aui-padded-5" tapmode onclick="CanvasImg.openBrowserImg({{!JSON.stringify([vo.imgsrc])}},0)">
                        <img data-echo="{{=vo.imgsrc}}" src="../image/load-img.png" class="aui-border-radius" width="200px" height="250px" onerror="this.src='../image/load-img.png'" />
                    </div>
                    <div class="aui-flex-item-4 aui-padded-10 aui-flex-row aui-flex-middle">
                        <label class="aui-label aui-bg-tag-quan aui-margin-b-15" tapmode onclick="sharePic('{{=vo.imgsrc}}','{{=vo.id}}','{{=vo.content}}')">分享图片</label>
                        <label class="aui-label aui-bg-tag-money" tapmode onclick="copyWenan('{{=vo.content}}')">复制文案</label>
                    </div>
                </div>
            </div>
        </div>
        {{~}}
    </script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.min.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/canvasImg.js"></script>
<script type="text/javascript" src="../script/opensdk.js"></script>
<script type="text/javascript">
    var menus;
    var page = 1;
    var type = 1;
    var apiurl = 'http://v2.api.haodanku.com/get_salutation_data/apikey/houpoping';
    var gooditem = {};
    var isend = false;
    apiready = function() {
        echo.init({
            offset: 0,
            throttle: 250,
            unload: false,
        });
        bodySrollChangeHeader();
        menus = $api.domAll($api.byId('menu'), '.aui-tab-item');
        fnSetNavMenuSelected(0);
        pullDown(function() {
            page = 1;
            getInitData();
        }, true);
        getMoreGoods(function() {
            if (isend == true) {
                return;
            }
            page++;
            console.log(page);
            console.log(apiurl + '/min_id/' + page + '/category/' + type);
            $(".index_loading").show();
            getData(apiurl + '/min_id/' + page + '/category/' + type, function(ret, err) {
                $(".index_loading").hide();
                //console.log(JSON.stringify(ret));
                console.log(JSON.stringify(err));
                if (ret && ret.data.length > 0) {
                    var list_data = new Array;
                    var temp_id = $api.byId('tmpl_goods_list');
                    var tmpdata = doT.template($api.text(temp_id));
                    list_data = list_data.concat(ret.data);
                    $api.append($api.byId('div_goods_list'), tmpdata(list_data));
                } else {
                    isend = true;
                    showToast('无数据');
                }
            })
        });
        $('.colse_btn').click(function() {
            $('.share_bg').hide();
        });
        $('.saveimg').click(function() {
            showToast('已保存到相册!');
        });
        $('.wxshare').click(function() {
            copyWord('Tip:' + gooditem.wenan.replace(/<br\s*\/>/gi, "\n"), true);
            opensdk.wx.shareImage('session', gooditem.picurl, gooditem.picurl);
        });
        $('.qqshare').click(function() {
            copyWord('Tip:' + gooditem.wenan.replace(/<br\s*\/>/gi, "\n"), true);
            opensdk.qq.shareImage('QFriend', gooditem.picurl);
        });
        $('.kongjianshare').click(function() {
            copyWord('Tip:' + gooditem.wenan.replace(/<br\s*\/>/gi, "\n"), true);
            opensdk.qq.shareImage('QZone', gooditem.picurl);
        });
        $('.friendsshare').click(function() {
            copyWord('Tip:' + gooditem.wenan.replace(/<br\s*\/>/gi, "\n"), true);
            opensdk.wx.shareImage('tinimele', gooditem.picurl, gooditem.picurl);
        });
        $('.copywenan').click(function() {
            copyWord('Tip:' + gooditem.wenan.replace(/<br\s*\/>/gi, "\n"), true);
        });

    };

    function fnSetNavMenuSelected(index_) {
        $('.index_loading').show();
        page = 1;
        $api.html($api.byId('div_goods_list'), '');
        switch (index_) {
            case 0:
                type = 1;
                break;
            case 1:
                type = 3;
                break;
            case 2:
                type = 5;
                break;
            default:
                type = 1;
        }
        for (var i = 0; i < menus.length; i++) {
            if (index_ == i) {
                //$api.addCls(menus[i], ['aui-text-white,aui-label,aui-bg-tag-quan']);
                menus[i].classList.add('aui-text-white', 'aui-label', 'aui-bg-tag-quan');
            } else {
                //$api.removeCls(menus[i], 'aui-text-white,aui-label,aui-bg-tag-quan');
                menus[i].classList.remove('aui-text-white', 'aui-label', 'aui-bg-tag-quan');
            }
        }
        getInitData();
    }

    function getInitData() {
        $(".index_loading").show();
        getData(apiurl + '/min_id/' + page + '/category/' + type, function(ret, err) {
            $('.index_loading').hide();
            if (ret && ret.data.length > 0) {
                setDotTmpl('tmpl_goods_list', 'div_goods_list', ret.data);
                echo.render();
            } else {
                showToast('无数据');
            }
        });
    }

    function copyWenan(content) {
        copyWord('Tip:' + content, true);
    }

    function sharePic(imgurl, id, content) {
        gooditem.wenan = content;
        showProgress('生成图片中');
        var info = {
            url: imgurl,
            logoimg: '../image/logo.png',
            itemid: id
        };
        CanvasImg.makeQrcode({
            text: DOMAIN + '/shareapp.html?code=' + parseInt(isLoginOr().id) + 4000,
            itemid: id
        }, function(ret) {
            CanvasImg.canvasShareImg(info, ret, parseInt(isLoginOr().id) + 4000, function(ret) {
                hideProgress();
                $('.share_bg').show();
                gooditem.picurl = ret;
                console.log(ret);
            })
        })
    }
</script>

</html>
